<!-- 导航组件（比如 HomeCategory.vue） -->
<script setup>
import { useCategoryStore } from '@/stores'
import { computed, ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router' // 确保导入RouterLink

const categoryStore = useCategoryStore()

// 1. 调整默认显示数量（根据16个一级分类，建议显示8个）
const DEFAULT_VISIBLE_COUNT = 8
const visibleCategoryCount = ref(DEFAULT_VISIBLE_COUNT)

// 2. 控制折叠/展开状态
const isExpanded = ref(false) // 替换原来的showMore，语义更清晰

// 3. 计算属性：显示的分类和折叠的分类
const visibleCategories = computed(() => {
  const result = isExpanded.value
    ? categoryStore.categoryList
    : categoryStore.categoryList.slice(0, DEFAULT_VISIBLE_COUNT) // DEFAULT_VISIBLE=8

  // 关键调试：打印结果长度和isExpanded状态
  console.log('isExpanded状态：', isExpanded.value)
  console.log('visibleCategories长度：', result.length)
  return result
})



const collapsedCategories = computed(() => {
  return categoryStore.categoryList.slice(visibleCategoryCount.value)
})

// 4. 切换展开/折叠（增加动画感知，优化体验）
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 5. 挂载时获取数据
onMounted(async () => {
  await categoryStore.getCategory()
  console.log('一级分类总数：', categoryStore.categoryList.length)
  console.log('一级分类列表：', categoryStore.categoryList.map(item => item.name))
})
</script>

<template>
  <div class="home-category">
    <!-- 新增：ALL_CATEGORIES 单独显示（作为总入口） -->
    <div class="all-category-entry">
      <RouterLink to="/category/all">
        <i class="icon an an-th-list"></i>
        <span>全部分类</span>
      </RouterLink>
    </div>

    <ul class="menu">
      <!-- 显示的分类（默认8个，展开时显示全部） -->
      <li
        v-for="item in visibleCategories"
        :key="item.id"
        class="category-item"
      >
        <!-- 一级分类链接（跳转到对应分类页） -->
        <RouterLink
          :to="`/category/${item.id}`"
          class="parent-link"
        >
          <i :class="item.icon" v-if="item.icon"></i> <!-- 显示分类图标 -->
          <span>{{ item.name }}</span>
        </RouterLink>

        <!-- 显示前2个子分类（保持原逻辑，增加空值判断） -->
        <div class="child-links" v-if="item.children.length">
          <RouterLink
            v-for="child in item.children.slice(0, 2)"
            :key="child.id"
            :to="`/category/${child.id}`"
            class="child-link"
          >
            {{ child.name }}
          </RouterLink>
        </div>

        <!-- 分类弹层（增加空值判断，避免无数据时显示空弹层） -->
        <div class="layer" v-if="item.children.length || item.goods.length">
          <h4>
            {{ item.name }} 推荐
            <small>根据您的购买或浏览记录推荐</small>
          </h4>

          <!-- 子分类列表（如果有子分类） -->
          <div class="layer-children" v-if="item.children.length">
            <h5>子分类</h5>
            <ul class="children-list">
              <li v-for="child in item.children" :key="child.id">
                <RouterLink :to="`/category/${child.id}`">
                  {{ child.name }}
                </RouterLink>
              </li>
            </ul>
          </div>

          <!-- 推荐商品（如果有商品数据） -->
          <div class="layer-goods" v-if="item.goods.length">
            <h5>推荐商品</h5>
            <ul class="goods-list">
              <li v-for="good in item.goods" :key="good.id">
                <RouterLink :to="`/detail/${good.id}`">
                  <img :src="good.picture" alt="" :title="good.name">
                  <div class="info">
                    <p class="name ellipsis-2">{{ good.name }}</p>
                    <p class="desc ellipsis">{{ good.desc }}</p>
                    <p class="price"><i>¥</i>{{ good.price }}</p>
                  </div>
                </RouterLink>
              </li>
            </ul>
          </div>

          <!-- 无数据提示 -->
          <div class="no-data" v-if="!item.children.length && !item.goods.length">
            暂无相关数据
          </div>
        </div>
      </li>

      <!-- 折叠/展开按钮（只有当有折叠分类时才显示） -->
      <li class="expand-btn" v-if="collapsedCategories.length > 0">
        <button @click="toggleExpand" class="btn">
          <i class="icon an an-chevron-down" v-if="!isExpanded"></i>
          <i class="icon an an-chevron-up" v-if="isExpanded"></i>
          <span>
            {{ isExpanded ? '收起分类' : `更多分类（${collapsedCategories.length}个）` }}
          </span>
        </button>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
// 引入你的全局变量（比如$xtxColor、$priceColor）
// @import '@/styles/variables.scss';

.home-category {
  width: 250px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;
  color: #fff;

  // 全部分类入口（单独样式）
  .all-category-entry {
    height: 60px;
    line-height: 60px;
    padding-left: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    a {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;

      .icon {
        margin-right: 10px;
        font-size: 20px;
      }
    }
  }

  .menu {
    // 一级分类项
    .category-item {
      padding: 0 40px;
      height: 55px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      transition: background 0.3s;

      &:hover {
        background: $xtxColor; // 你的主题色
      }

      // 一级分类链接
      .parent-link {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 16px;
        margin-bottom: 4px;

        .icon {
          margin-right: 8px;
          font-size: 14px;
        }
      }

      // 子分类链接容器
      .child-links {
        display: flex;
        gap: 12px; // 子分类之间的间距

        .child-link {
          color: rgba(255, 255, 255, 0.8);
          font-size: 12px;

          &:hover {
            color: #fff;
            text-decoration: underline;
          }
        }
      }

      //  hover弹层
      .layer {
        width: 990px;
        min-height: 500px;
        background: rgba(255, 255, 255, 0.95);
        position: absolute;
        left: 250px;
        top: 0;
        display: none;
        padding: 20px;
        color: #333;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 0 4px 4px 0;

        h4 {
          font-size: 18px;
          font-weight: 500;
          line-height: 40px;
          border-bottom: 1px solid #eee;
          margin-bottom: 20px;

          small {
            font-size: 14px;
            color: #666;
            margin-left: 10px;
          }
        }

        // 子分类列表
        .layer-children {
          margin-bottom: 20px;

          h5 {
            font-size: 16px;
            margin-bottom: 12px;
            color: #666;
          }

          .children-list {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;

            li {
              width: calc(100% / 6 - 16px); // 6列布局

              a {
                color: #333;
                font-size: 14px;

                &:hover {
                  color: $xtxColor;
                  font-weight: 500;
                }
              }
            }
          }
        }

        // 推荐商品列表
        .layer-goods {
          .goods-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            li {
              width: calc(100% / 3 - 20px);
              height: 120px;
              border: 1px solid #eee;
              border-radius: 4px;
              background: #fff;
              overflow: hidden;

              a {
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                padding: 10px;
                color: #333;

                &:hover {
                  background: #f5f5f5;
                }

                img {
                  width: 95px;
                  height: 95px;
                  object-fit: cover;
                }

                .info {
                  padding-left: 10px;
                  line-height: 24px;
                  overflow: hidden;
                  flex: 1;

                  .name {
                    font-size: 14px;
                    color: #333;
                  }

                  .desc {
                    color: #999;
                    font-size: 12px;
                  }

                  .price {
                    font-size: 16px;
                    color: $priceColor; // 价格色

                    i {
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }

        // 无数据提示
        .no-data {
          text-align: center;
          padding: 50px 0;
          color: #999;
          font-size: 14px;
        }
      }

      // hover显示弹层
      &:hover .layer {
        display: block;
      }
    }

    // 展开/折叠按钮
    .expand-btn {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      .btn {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;
        cursor: pointer;

        .icon {
          margin-right: 6px;
          font-size: 12px;
        }

        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}

//  ellipsis 文本溢出省略（通用样式）
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>